<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '参数详情',
  },
}
</route>
<template>
  <view class="entire">
    <image
      style="z-index: -10; position: fixed; top: 0; width: 100vw; height: 100vh"
      :src="listBg"
      mode="aspectFill"
    />
    <view class="div1">
      <view class="product-title">{{ Product.productDesc }}</view>
      <!-- 产品图片 -->
      <image
        :src="Product.productPhoto || defaultImage"
        class="product-picture"
        @error="handleImageError"
        mode="aspectFit"
      />
    </view>
    <scroll-view
      ref="scrollContainer"
      scroll-y="true"
      class="div2"
      enable-flex="true"
      :style="{ height: pageData.div2Height + 'px' }"
    >
      <wht-tabs
        v-model="pageData.tab1"
        :list="pageData.tabList1"
        @change="handleTab1"
        bgColor="#e5effd"
        color="black"
        active-color="black"
        line-color="#254872"
        :font-size="36"
        :isRound="true"
        :min-width="175"
        :padding="100"
      />
      <view v-if="pageData.tab1 === 0" class="table-container">
        <view class="paramTb">
          <view class="tr">
            <view class="td left-td">产品编码P/N</view>
            <view class="td right-td">
              <text>{{ Product.productCode }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">原产地COO</view>
            <view class="td right-td">
              <text>{{ Product.origin }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">状态Status</view>
            <view class="td right-td">
              <text style="">{{ Product.approvals }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">净重Net Weight</view>
            <view class="td right-td">
              <text>{{ Product.netWeight }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">毛重Gross Weight</view>
            <view class="td right-td">
              <text>{{ Product.grossWeight }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">体积Volume</view>
            <view class="td right-td">
              <text>{{ Product.volume }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">产品描述</view>
            <view class="td right-td">
              <text>{{ Product.productDesc }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">电压Voltage</view>
            <view class="td right-td">
              <text>{{ Product.voltage }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">功率P1</view>
            <view class="td right-td">
              <text>{{ Product.power }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">最大扬程Max Head</view>
            <view class="td right-td">
              <text>{{ Product.maxHeadStr }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">最大流量Max Flow</view>
            <view class="td right-td">
              <text>{{ Product.maxFlowStr }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">额定扬程Nominal Head</view>
            <view class="td right-td">
              <text>{{ Product.nominalHeadStr }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">额定流量Nominal Flow</view>
            <view class="td right-td">
              <text>{{ Product.nominalFlowStr }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">最低液体温度Min liquid temp</view>
            <view class="td right-td">
              <text>{{ Product.minLiquidTemp }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">最高液体温度Max liquid temp</view>
            <view class="td right-td">
              <text>{{ Product.maxLiquidTemp }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">最低环境温度Min ambient temp</view>
            <view class="td right-td">
              <text>{{ Product.minAmbientTemp }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">最高环境温度Max ambient temp</view>
            <view class="td right-td">
              <text>{{ Product.maxAmbientTemp }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">吸水口尺寸</view>
            <view class="td right-td">
              <text>{{ Product.pipeConnectionInletSize }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">出水口尺寸</view>
            <view class="td right-td">
              <text>{{ Product.pipeConnectionOutletSize }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">叶轮材质</view>
            <view class="td right-td">
              <text>{{ Product.impeller }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">泵壳材质</view>
            <view class="td right-td">
              <text>{{ Product.pumpHouse }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">绝缘等级</view>
            <view class="td right-td">
              <text>{{ Product.insulationClass }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">防护等级</view>
            <view class="td right-td">
              <text>{{ Product.ipClass }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">主轴封</view>
            <view class="td right-td">
              <text>{{ Product.shaftSeal }}</text>
            </view>
          </view>
          <view class="tr">
            <view class="td left-td">认证</view>
            <view class="td right-td">
              <text>{{ Product.approvals }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-if="pageData.tab1 === 1" class="file-container">
        <view class="file-title">文件目录</view>
        <view v-if="pageData.fileList.length > 0">
          <view class="file-list" v-for="(item, index) in pageData.fileList" :key="index">
            <view class="file-item">
              <image
                :src="
                  item.type === 'pdf'
                    ? '/static/images/icons/productCenter/icon_pdf.png'
                    : '/static/images/icons/productCenter/icon_pdf.png'
                "
                class="file-icon"
              ></image>
              <view class="file-info">
                <view class="file-name">{{ item.name }}</view>
              </view>
              <view class="file-btn" @click="openFile(item)">打开</view>
            </view>
          </view>
        </view>
        <view v-else class="no-files">
          <text>暂无相关文件</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
// 修改 productInfo.vue 中的 script 部分
import { listBg } from '@/static/imgMap'
import { getProductDetail, ProductDetail } from '@/service/product/product'
import { onLoad } from '@dcloudio/uni-app'

// 产品数据使用响应式对象
const Product = reactive<ProductDetail>({
  approvals: '',
  businessType: '',
  connectionMethod: '',
  createTime: '',
  dataBooklet: '',
  deep: '',
  dimension: '',
  grossWeight: '',
  height: '',
  impeller: '',
  insulationClass: '',
  io: '',
  ipClass: '',
  longst: '',
  materialGroup: '',
  maxAmbientTemp: '',
  maxFlow: 0,
  maxFlowStr: '',
  maxHead: 0,
  maxHeadStr: '',
  maxLiquidTemp: '',
  medium: '',
  minAmbientTemp: '',
  minLiquidTemp: '',
  netWeight: '',
  nominalFlow: 0,
  nominalFlowStr: '',
  nominalHead: 0,
  nominalHeadStr: '',
  normsModel: '',
  origin: '',
  performance: '',
  pipeConnectionInletSize: '',
  pipeConnectionOutletSize: '',
  power: '',
  pressure: '',
  productCode: '',
  productDesc: '',
  productDesc2: '',
  productId: 0,
  productPhoto: '',
  pumpHouse: '',
  quickGuide: '',
  series: '',
  shaftSeal: '',
  updateTime: '',
  voltage: '',
  volume: '',
  wide: '',
  ioName: '',
  dimensionName: '',
  isDBS: 0,
})

const pageData = reactive({
  tab1: 0,
  tabList1: ['常规参数', '相关文件'],
  loading: false,
  div2Height: 0,
  msgList1: [],
  msgList2: [],
  page: 1,
  limit: 10,
  totalCount: 0,
  fileList: [] as Array<{ name: string; url: string; type: string }>,
})

const defaultImage = '/static/images/icons/default.jpg'

// 从URL解析ID并请求产品详情
onLoad(async (options) => {
  try {
    pageData.loading = true
    // 解析URL参数获取产品ID
    const productId = Number(options.id || 0)

    if (!productId) {
      uni.showToast({
        title: '产品ID无效',
        icon: 'none',
      })
      return
    }

    // 根据ID请求产品详情
    const response = await getProductDetail(productId)

    if (response && response.code === 200) {
      // 将API返回的数据赋值给Product对象
      Object.assign(Product, response.data)
      // Product.productPhoto = 'https://grundfos.elearningcn.com' + Product.productPhoto
      Product.productPhoto = 'https://grundfosuat.panzhi.com.cn' + Product.productPhoto
      // 处理文件列表
      pageData.fileList = []
      // todo 上架要换成正式地址
      // item.url = 'https://grundfosuat.panzhi.com.cn' + item.url
      // item.url = 'https://grundfos.elearningcn.com' + item.url
      // 添加尺寸图
      if (Product.dimension) {
        pageData.fileList.push({
          name: Product.dimensionName || '尺寸图.png',
          url: 'https://grundfosuat.panzhi.com.cn' + Product.dimension,
          // url: 'https://grundfos.elearningcn.com' + Product.dimension,
          type: 'image',
        })
      }

      // 添加IO文件
      if (Product.io) {
        pageData.fileList.push({
          name: Product.ioName || 'IO说明.pdf',
          url: 'https://grundfosuat.panzhi.com.cn' + Product.io,
          // url: 'https://grundfos.elearningcn.com' + Product.io,
          type: 'pdf',
        })
      }
    } else {
      uni.showToast({
        title: response?.message || '获取产品详情失败',
        icon: 'none',
      })
    }
  } catch (error) {
    uni.showToast({
      title: '获取产品详情失败',
      icon: 'none',
    })
  } finally {
    pageData.loading = false

    // 获取屏幕高度
    uni.getSystemInfo({
      success(res) {
        const screenHeight = res.windowHeight
        uni
          .createSelectorQuery()
          .select('.div1')
          .boundingClientRect((data) => {
            if ('height' in data) {
              pageData.div2Height = screenHeight - data.height
            }
          })
          .exec()
      },
    })
  }
})

// 处理图片加载错误
const handleImageError = () => {
  Product.productPhoto = defaultImage
}

// 处理标签切换
const handleTab1 = (index) => {
  pageData.tab1 = index
}

// 打开文件
const openFile = (item) => {
  console.log(item.url)
  if (!item || !item.url) {
    uni.showToast({
      title: '文件地址无效',
      icon: 'none',
    })
    return
  }

  // 根据文件类型处理
  if (item.type === 'image') {
    uni.previewImage({
      urls: [item.url],
      current: item.url,
    })
  } else {
    // 打开PDF等文档
    uni.downloadFile({
      url: item.url,
      success: (res) => {
        if (res.statusCode === 200) {
          uni.openDocument({
            filePath: res.tempFilePath,
            success: function () {
              console.log('打开文档成功')
            },
            fail: function (error) {
              console.error('打开文档失败:', error)
              uni.showToast({
                title: '打开文档失败',
                icon: 'none',
              })
            },
          })
        }
      },
      fail: () => {
        uni.showToast({
          title: '打开文件失败',
          icon: 'none',
        })
      },
    })
  }
}
</script>

<style scoped lang="scss">
.entire {
  width: 100%;

  .div1 {
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(37, 73, 115);
      width: 100%;
      height: 120rpx;
      color: #fff;
      font-size: large;
    }
  }

  .div2 {
    width: 100%;
    overflow-y: scroll;
  }
}

.product-title {
  width: 100%;
  height: 100rpx;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-color: $uni-color-primary;
}

.product-picture {
  width: 750rpx;
  height: 500rpx;
}

/* 表格样式 */
.table-container {
  padding: 20rpx;
}

.paramTb {
  width: 700rpx;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid #000000;

  .tr {
    display: flex;
    border-bottom: 1px solid #000000;

    &:last-child {
      border-bottom: none;
    }
  }

  .td {
    padding: 20rpx;
    font-size: 28rpx;

    &.left-td {
      width: 40%;
      border-right: 1px solid #000000;
      background-color: rgba(245, 249, 255, 0);
      font-weight: 500;
    }

    &.right-td {
      width: 60%;
      word-break: break-all;
      word-wrap: break-word;

      text {
        display: inline-block;
        width: 100%;
        word-break: break-all;
        word-wrap: break-word;
        white-space: normal;
      }
    }
  }
}

/* 文件目录样式 */
.file-container {
  padding: 0 20rpx;
}

.file-title {
  width: 100%;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #264974;
  font-weight: bold;
  margin-top: 30rpx;
  height: 50rpx;
}

.file-list {
  margin-top: 20rpx;
}

.file-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.file-icon {
  width: 62rpx;
  height: 78rpx;
  margin-right: 20rpx;
}

.file-info {
  flex: 1;
  overflow: hidden;
}

.file-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.file-desc {
  font-size: 24rpx;
  color: #666;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.file-btn {
  width: 120rpx;
  height: 40rpx;
  background-color: $uni-color-primary;
  color: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
}

.no-files {
  display: flex;
  justify-content: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
}

.loading-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
}
</style>
